<template>
	<view class="orderInfo" :style="{height: orderHeight+'px'}">
		<view class="orderinfo">
			<view class="box d-jc-sb d-ai-c">
				<view class="box d-ai-c d-header">
					<view class="">
						
					</view>
					<view class="ml-2">
						订单信息
					</view>
				</view>
				<view class="" style="color: #FF8338;font-size: 30rpx;font-weight:500;" v-if="orderInfodata.status==1">
					待付款
				</view>
				<view style="color: #999999 ;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==5">已完成</view>
				<view style="color: #FF8338 ;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==2">
					<view style="color: #FF7E51;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.failStatus==0">预约中</view>
					<view style="color: #FF7E51;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.failStatus==1">退款中</view>
					<view style="color: #FF7E51;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.failStatus==2">退款失败</view>
					<view style="color: #FF7E51;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.failStatus==3">退款成功</view>
				</view>
				<view style="color: #FF8338 ;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==3">进行中</view>
				<view style="color: #999999;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==6">已取消</view>
				<view style="color: #FF7E51;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==4">待评价</view>
				<view style="color: #999999;font-size: 30rpx;font-weight:  500;" v-if="orderInfodata.status==7">已超时</view>
			</view>
			<view class="orderinfo-each mt-2">
				订单编号：{{orderInfodata.orderNo}}
			</view>
			<view class="orderinfo-each mt-1">
				下单时间：{{orderInfodata.createTime}}
			</view>
			<!-- <view class="orderinfo-each mt-1" v-if="orderInfodata.status==22||orderInfodata.status==3">
				付款时间：{{orderInfodata.createTime}}    有问题
			</view> -->
			<view class="orderinfo-each mt-1" >
				订单金额：<text style="color: #F25A49">￥{{orderInfodata.money}}</text>
			</view>
		</view>
		<!-- 服务中 -->
		<view class="orderinfo mt-2" v-if="orderInfodata.status==2||orderInfodata.status==3||orderInfodata.status==4||orderInfodata.status==5||orderInfodata.status==6">
			<view class="box d-ai-c">
				<view class="box d-ai-c d-header">
					<view class="">
						
					</view>
					<view class="ml-2">
						陪诊信息
					</view>
				</view>
			</view>
			<view class="orderinfo-each mt-2">
				陪诊员：{{orderInfodata.accompanyName==null||orderInfodata.accompanyName==''?'暂无接单':orderInfodata.accompanyName}}
			</view>
			<view class="orderinfo-each mt-1">
				接单时间：{{orderInfodata.orderTime==''||orderInfodata.orderTime==null?'暂无接单':orderInfodata.orderTime}}
			</view>
			<view class="orderinfo-each mt-1" v-if="orderInfodata.accompanyReceiveStatus[0].status==0">
				服务进度：<text style="color: #FF8338">接单({{orderInfodata.accompanyReceiveStatus[0].createTime}})</text>
			</view>
			<view class="orderinfo-each mt-1" v-if="orderInfodata.accompanyReceiveStatus[0].status==1">
				服务进度：<text style="color: #FF8338">开始服务({{orderInfodata.accompanyReceiveStatus[0].createTime}})</text>
			</view>
			<view class="orderinfo-each mt-1" v-if="orderInfodata.accompanyReceiveStatus[0].status==2">
				服务进度：<text style="color: #FF8338">抵达地点({{orderInfodata.accompanyReceiveStatus[0].createTime}})</text>
			</view>
			<view class="orderinfo-each mt-1" v-if="orderInfodata.accompanyReceiveStatus[0].status==3">
				服务进度：<text style="color: #FF8338">离开地点({{orderInfodata.accompanyReceiveStatus[0].createTime}})</text>
			</view>
			<view class="orderinfo-each mt-1" v-if="orderInfodata.accompanyReceiveStatus[0].status==4">
				服务进度：<text style="color: #FF8338">结束服务({{orderInfodata.accompanyReceiveStatus[0].createTime}})</text>
			</view>
		</view>
		
		<view class="orderinfo mt-2" v-if="orderInfodata.status==1||orderInfodata.status==7">
			<view class="box d-ai-c">
				<view class="box d-ai-c d-header">
					<view class="">
						
					</view>
					<view class="ml-2">
						陪诊信息
					</view>
				</view>
			</view>
			<view class="orderinfo-each mt-2">
				陪诊员：暂无接单
			</view>
			<view class="orderinfo-each mt-1">
				接单时间：暂无接单
			</view>
		</view>
		<view class="appointment">
			<view class="box d-ai-c head">
				<view class="">		
				</view>
				<view class="ml-2">
					预约信息
				</view>
			</view>
			<view class="orderinfo-each1 mt-2"  v-if="orderInfodata.type==1">
				服务类型：门诊陪伴
			</view>
			<view class="orderinfo-each1 mt-2"  v-if="orderInfodata.type==2">
				服务类型：血透门诊陪伴
			</view>
			<view class="orderinfo-each1 mt-2"  v-if="orderInfodata.type==3">
				服务类型：代配药门诊陪伴
			</view>
			<view class="orderinfo-each1 mt-1">
				就诊对象：{{orderInfodata.name}}（{{orderInfodata.phone}}）
			</view>
			<view class="orderinfo-each1 mt-1" >
				就诊医院：{{orderInfodata.hospitalName}}
			</view>
			<view class="orderinfo-each1 mt-1">
				出发时间：{{orderInfodata.startTime}}
			</view>
			<view class="orderinfo-each1 mt-1">
				出发地点：{{orderInfodata.startAddress}}
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.tripType==1">
				出行方式：公交车
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.tripType==2">
				出行方式：网约车
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.tripType==3">
				出行方式：步行
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.tripType==4">
				出行方式：非急救转运
			</view>
			<view class="orderinfo-each1 mt-1">
				选定陪诊：{{orderInfodata.accompanyName==null||orderInfodata.accompanyName=='' ?'暂无选定':orderInfodata.accompanyName}}
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.status==1">
				路程距离：{{orderInfodata.distance/1000}}公里
			</view>
			<view class="orderinfo-each1 mt-1" v-if="orderInfodata.status==1">
				路程超出费用：{{orderInfodata.exceed}}元
			</view>
		</view>
		<view class="bottom box d-ai-c d-jc-end">
				<view class="grey" v-if="orderInfodata.status==1" @tap="cancelorder(orderInfodata.orderNo)">取消订单</view>
				<view class="orange ml-2" v-if="orderInfodata.status==1" @tap="pay(orderInfodata.orderNo)">立即支付</view>
				<view class="grey" v-if="orderInfodata.status==2" @tap="applyrefund(orderInfodata.orderNo,orderInfodata.money)">申请退款</view>
				<!-- <view class="orange ml-2" v-if="orderInfodata.status==2">提醒接单</view> -->
				<!-- <view class="orange ml-2">服务进度</view> -->
				<view class="orange ml-2" v-if="orderInfodata.status==4" @tap="orderavaluate(orderInfodata.orderNo)">服务评价</view>
		</view>
		<wybpopup ref="popup1" type='bottom'>
			<view class="popup1">
				<view class="pop-t">
					<view>选择支付方式</view>
					<image class="pop_images1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode="" @tap="payclose()"></image>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/weixin@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/huiyuan@2x.png" mode=""></image>
							<view class="pop-name box">
								<text>{{item.name}}</text>
								<!-- <text class="ml-1" v-if="item.value==='2'">会员免费购买</text> -->
							</view>
						</view>
						<view>
							<radio :value="item.value" :color="color" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<view class="bot">
					<view class="font">
						需付款：<text style="color:#F25A49">￥{{orderInfodata.money}}</text>
					</view>
					<view class="payment" type="default" @tap='paymoney'>
						立即支付
					</view>
				</view>
		
		
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup
		       },
		data() {
			return {
				items: [
					{
						value: '1',
						name: '微信支付',
					},
					{
						value: '2',
						name: '会员支付',
						checked: 'true'
					}
				
				],
				current:0,
				status:2, //1 服务中 2 已完成
				orderNo:'',
				orderHeight:400,
				orderInfodata:'',
				color:'#FF8338',
			}
		},
		onLoad(option) {
			this.orderNo = option.orderNo
			this.getorderInfo()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(100) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		methods: {
			orderavaluate(orderNo){
				uni.navigateTo({
					url:'Avaluate?orderNo='+orderNo
				})
			},
			applyrefund(orderNo,money){
				uni.navigateTo({
					url:'applyrefund?orderNo='+orderNo+'&money='+money
				})
			},
			cancelorder(orderNo){
				uni.showModal({
				    title: '提示',
				    content: '确定取消该订单吗？',
				    success:(res) =>{
				        if (res.confirm) {
				           this.$api.ordercancel ({
				           	status:6,
				           	orderNo:orderNo
				           }).then((res) => {
				           	if(res.data.code=200){
				           		console.log(res.data.dataMap)
				           		uni.showToast({
				           		    title: '取消成功',
				           		    duration: 2000,
				           			icon:'none'
				           		});
								uni.$emit('carData',0)
				           		uni.navigateBack({
				           			delta:1
				           		})
				           	}
				           			
				           })
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			paymoney() {
				let _this = this
				let type = 1;
				if(this.current==0){
					type = 1
				}
				if(this.current==1){
					type=4
				}
				console.log(type)
				if(type==1){
					this.$api.wxpax({
						orderNo: _this.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							if(type==1){ //微信支付
								uni.requestPayment({
									appId:res.data.dataMap.appid,
								    provider: 'wxpay',
								    timeStamp:res.data.dataMap.timeStamp,
								    nonceStr: res.data.dataMap.nonceStr,
								    package: res.data.dataMap.package,
								    signType: 'MD5',
								    paySign: res.data.dataMap.paySign,
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											duration: 500,
											icon: "none"
										});
										uni.$emit('carData',2)
										uni.navigateBack({
											delta:1,
											animationDuration:1000
										})
										
								    },
								    fail: function (err) {
								       uni.showToast({
								       	title: '支付失败',
								       	duration: 500,
								       	icon: "none"
								       });
								    }
								});
							}
						}else{
							_this.close()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}else if(type==4){
					this.$api.wxpax({
						orderNo: _this.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							uni.showToast({
								title: '支付成功',
								duration: 500,
								icon: "none"
							});
							uni.$emit('carData',2)
							uni.navigateBack({
								delta:1,
								animationDuration:1000
							})
						}else{
							_this.close()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}
			},
			radioChange: function(evt) {
				console.log(evt.detail.value)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			//支付弹框
			pay(orderNo){
				this.orderNo = orderNo
				this.$refs.popup1.show()
			},
			payclose(){
				this.$refs.popup1.hide()
			},
			getorderInfo(){
				this.$api.orderInfo({
					orderNo:this.orderNo
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.orderInfodata = res.data.dataMap
					}
							
				})
			},
		}
	}
</script>

<style lang="less" scoped> 
/deep/.wyb-popup-box{
		position: fixed;
		transition-timing-function: ease-out;
		transition-property: opacity, transform;
	    border-radius: 60rpx 60rpx 0rpx 0rpx!important;
	}
	.bot{
		margin-top: 100rpx;
		text-align: center;
		.font{
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.payment{
			width: 670rpx;
			height: 100rpx;
			background: #FF8338;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}
	
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		display: block;
		width: 180rpx;
		height: 36rpx;
		border: 2rpx solid #F25A49;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #F25A49;
		line-height: 36rpx;
		text-align: center;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		width: 750rpx;
		height: 80rpx;
		margin-top: 40rpx;
		position: relative;
	}
	.pop-t>view{
		position: absolute;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		left: 275rpx;
		
	}
	.pop_images1{
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 40rpx;
	}
	.popup1 {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
.orderInfo{
	background: #F2F7FF;
	padding: 30rpx;
}
.orderinfo{
	width: 630rpx;
	min-height: 117rpx;
	padding: 30rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.orderinfo-each{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	.d-header{
		view:nth-child(1){
			width: 8rpx;
			height: 26rpx;
			background: #FF8338;
			border-radius: 4rpx;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
}
.appointment{
	margin-top: 16rpx;
	width: 630rpx;
	min-height: 450rpx;
	padding: 30rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.head{
		view:nth-child(1){
			width: 8rpx;
			height: 26rpx;
			background: #FF8338;
			border-radius: 4rpx;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		
	}
	.orderinfo-each1{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
}
.bottom{
	width: 690rpx;
	// height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #FFFFFF;
	padding: 0rpx 30rpx;
	.grey{
				  width: 180rpx;
				  height: 80rpx;
				  background: #FFFFFF;
				  border: 2rpx solid #CCCCCC;
				  border-radius: 40rpx;
				  line-height: 80rpx;
				  text-align: center;
				  font-size: 30rpx;
				  font-weight: 500;
				  color: #666666;
	}
	.orange{
				  width: 180rpx;
				  height: 80rpx;
				  background: #FF8338;
				  border: 2rpx solid #FF8338;
				  border-radius: 40rpx;
				  font-size: 30rpx;
				  font-weight: 500;
				  color: #FFFFFF;
				  line-height: 80rpx;
				  text-align: center;
	}
}
</style>
